<template>
  <ChartBox width="100%" height="100%" :title="this.$window.title.title3">
    <div class="mydata3-box">
      <div class="data-box" id="mydata3" ref="hot_ref"></div>
    </div>
  </ChartBox>
</template>

<script>
/* eslint-disable */
// import { mapState } from 'vuex';
import ChartOption from "../../common/ChartOption";
import ChartBox from "@/views/components/ChartBox.vue";

export default {
  components: {
    ChartBox,
  },
  data() {
    return {
      xAxisData: [], //x轴数据
      seriesincome: [], //y轴数据
      situationalOption:{}
    };
  },
   created() {
    this.situationalOption = this.$window.situationalOption
  },
 mounted() {
    this.initCharts();
    window.addEventListener('resize', this.screenAdapter);
    this.screenAdapter();
  },
   destroyed() {
    window.removeEventListener('resize', this.screenAdapter);
  },
  methods: {
    initCharts() {
      if (!this.myChart) {
        // 传入vuex中存储的静态数据
        const option = ChartOption.situationalOption(true,situationalOption);
        this.myChart = this.$echarts.init(document.getElementById("mydata3"));
        this.myChart.setOption(option);
      } else {
        let data = this.parkorder;
        const option = ChartOption.situationalOption(false, data);
        this.myChart.setOption(option);
      }
    },
     screenAdapter() {
      this.titleFontSize = (this.$refs.hot_ref.offsetWidth / 100) * 3.6;
      this.titleFontHeight = (this.$refs.hot_ref.offsetHeight / 100) * 3.6;
      // console.log('this.titleFontHeight',this.titleFontHeight)
      const adpterOption = {
        grid: {
          left: this.titleFontSize ,
          right: this.titleFontSize * 2 ,
          top: this.titleFontHeight * 7,
          bottom: this.titleFontHeight * 2
        },
        xAxis: [
          {
            axisLabel: {
              fontSize: this.titleFontSize / this.situationalOption.Xsize,
            },
          },
        ],
        yAxis: [
          {
            axisLabel: {
              fontSize: this.titleFontSize / this.situationalOption.Ysize,
            },
          },
        ],
        legend: {
          itemWidth: this.titleFontSize,
          itemHeight: this.titleFontSize / 2,
          itemGap: this.titleFontSize / 2,
          textStyle: {
            fontSize: this.titleFontSize / this.situationalOption.legendSize,
          },
          top: this.titleFontHeight * 4,
          right: this.titleFontSize * 2,
        },
        series: [
          {
            radius: this.titleFontSize * 4.5,
            center: ["50%", "60%"],
          },
        ],
      };
      this.myChart.setOption(adpterOption);
      this.myChart.resize();
    },
  },
  // mounted() {
  //   this.initCharts();
  //   // this.startInterval();
  //   window.addEventListener('resize', this.screenAdapter);
  //   this.screenAdapter();
  // },
  // destroyed() {
  //   window.removeEventListener('resize', this.screenAdapter);
  //   clearInterval(this.timeId);
  // },
  // computed: {
  //   ...mapState('dataview', ['weekDataView']),
  // },
  // watch: {
  //   'weekDataview': function () {
  //     this.initCharts()
  //   }
  // },
  // methods: {
  //   // initCharts() {
  //   //   console.log('weekDataView2', this.weekDataView, this.$store.state.dataview)
  //   //   this.xAxisData = []
  //   //   this.seriesincome = []
  //   //   if (this.weekDataView) {
  //   //     for (let i = 0; i < this.weekDataView.length; i++) {
  //   //       const dt = this.weekDataView[i].dt + ''
  //   //       if (dt) {
  //   //         dt = dt.slice(4)
  //   //       }
  //   //       this.xAxisData.push(dt)
  //   //       const paid = this.weekDataView[i].paid || 0 // 停车实收金额
  //   //       this.seriesincome.push(paid)
  //   //     }
  //   //     console.log('DataOne3', this.xAxisData, this.seriesincome)
  //   //     if (!this.xAxisData || this.xAxisData.length <= 0) {
  //   //       setTimeout(() => {
  //   //         this.initCharts()
  //   //       }, 1000);
  //   //     } else {
  //   //       this.average = this.$Util.kanbanformat(
  //   //         this.$XEUtils.mean(this.seriesincome)
  //   //       )
  //   //       this.updateCharts(this.xAxisData, this.seriesincome)
  //   //     }
  //   //   } else {
  //   //     setTimeout(() => {
  //   //       this.initCharts()
  //   //     }, 1000);
  //   //   }
  //   // },
  //   initCharts() {
  //     if (!this.myChart) {
  //       // 传入vuex中存储的静态数据
  //       const option = ChartOption.weekIncomeOption(true,this.weekDataView);
  //       this.myChart = this.$echarts.init(document.getElementById('mydata1'));
  //       this.myChart.setOption(option);
  //     } else {
  //       let data = this.parkorder;
  //       const option = ChartOption.weekIncomeOption(false, data);
  //       this.myChart.setOption(option);
  //     }
  //   },
  //   // updateCharts(xAxisData, seriesincome) {
  //   //   if (!this.myChart) {
  //   //     // 指定图表的配置项和数据
  //   //     const option = ChartOptiion.weekIncomeOption(
  //   //       true,
  //   //       xAxisData,
  //   //       seriesincome,
  //   //       0, 6
  //   //       // this.startValue,
  //   //       // this.endValue
  //   //     );
  //   //     // 基于准备好的dom，初始化echarts实例
  //   //     this.myChart = this.$echarts.init(document.getElementById('mydata1'));
  //   //     this.myChart.setOption(option);
  //   //   } else {
  //   //     // 指定图表的配置项和数据
  //   //     const option = ChartOptiion.weekIncomeOption(
  //   //       false,
  //   //       xAxisData,
  //   //       seriesincome,
  //   //       0, 6
  //   //       // this.startValue,
  //   //       // this.endValue
  //   //     );
  //   //     this.myChart.setOption(option);
  //   //   }
  //   //   console.log('yyyyyy',this.option)
  //   // },
  //   screenAdapter() {
  //     this.myChart.resize();
  //   },
  //   // 图表做动画
  //   startInterval() {
  //     this.timeId = setInterval(() => {
  //       this.startValue++;
  //       this.endValue++;
  //       /* console.log('this.startValue', this.startValue);
  //       console.log('this.endValue', this.endValue); */
  //       if (this.endValue > 6) {
  //         this.startValue = 0;
  //         this.endValue = 4;
  //       }
  //       this.updateCharts(this.xAxisData, this.seriesincome);
  //     }, 2000);
  //   },
  // },
};
</script>

<style scoped lang='scss'>
@import "../../../assets/css/parkview.scss";

.mydata3-box {
  min-width: $-pv-minWidth;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  #mydata3 {
    top: 3%;
    left: 6%;
    width: 90%;
    height: 90%;
  }
}
</style>